<!--
/**
@template: 贵州见证私有组件
评审角色: 结束见证功能补丁
弹框+按钮
@author: ChaoPengWang(wangcp-a@glodon.com)
@update: 2022/4/16 9:36 PM
-->

<template>
  <div class="add-revive">
    <el-button
      size="default"
      icon="icon-jieshujianzheng1"
      v-if="operationType === 'TASK'"
      @click="setShowOverWitness(true)">
      结束见证
    </el-button>

    <el-button
      v-else
      size="default"
      type="text"
      @click="setShowOverWitness(true)">
      评标结束见证
    </el-button>

    <!-- 结束弹框 -->
    <el-dialog title="结束见证" :visible.sync="showOverWitness" width="700px">
      <el-alert type="warning" show-icon class="over-alert" :closable="false">
        <span slot="title">
          1、请确认当前见证的交易活动已结束，确认无误后进行结束见证操作;
          <br />
          2、点击【确认】按钮,将自动执行见证事项'确认'操作, 请先确认见证事项完成无误后操作
        </span>
      </el-alert>

      <el-table :data="stopInfoList" class="add-revive-table">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column label="暂停时间" align="center" prop="witnessStopTime" />
        <el-table-column label="恢复时间" align="center" prop="witnessRecoveryTime" />
        <el-table-column label="停/复时长" align="center" prop="duration" />
      </el-table>
      <el-row>
        <el-col :span="12">
          <div class="add-revive-bottom">
            <div><strong>评审开始时间:</strong></div>
            <div>{{ evaluationStartTime }}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="add-revive-bottom">
            <div><strong>评审结束时间:</strong></div>
            <div>{{ evaluationEndTime }}</div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="overWitness">确定</el-button>
        <el-button @click="showOverWitness = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import moment from "moment";
  import { GZAPI_EvaluationTime } from "../api";
  import moment from "moment";
  import { genTime } from "./utils";

  export default {
    name: "gzAddReviewTime",
    props: {
      operationType:{
        type: String,
        default: 'TASK'
      },
      id: {
        type: String,
        required: true
      }
    },
    data: () => ({
      //评审开始时间
      evaluationStartTime: "",
      //评审结束时间
      evaluationEndTime: "",
      //评审暂停时间列表
      stopInfoList: [],
      // 是否显示弹框
      showOverWitness: false
    }),

    // computed: {
    //   witnessSubTaskId() {
    //     return this.$route.query.id || sessionStorage.getItem("witnessSubTaskId");
    //   }
    // },

    created() {},

    methods: {
      // 控制弹框的显示和隐藏
      setShowOverWitness(showOverWitness) {
        if (showOverWitness) {
          this.getReviewTime();
        }
        this.showOverWitness = showOverWitness;
      },

      //见证结束
      async overWitness() {
        if (this.validationPauseAndRestoreTime() || this.validationStateAndEndTime()) {
          this.$message({
            type: "warning",
            message: "请检查评审时间完整性",
            single: true
          });
          return;
        }
        this.$emit("over", () => {
          this.showOverWitness = false;
        });
      },

      // 校验 开始/结束时间的完整性
      validationStateAndEndTime() {
        const { evaluationStartTime, evaluationEndTime } = this;
        return !evaluationStartTime || !evaluationEndTime;
      },

      // 校验 暂停/恢复时间的完整性
      validationPauseAndRestoreTime() {
        const { stopInfoList } = this;
        return !stopInfoList.every((item) => {
          return item.witnessStopTime && item.witnessRecoveryTime;
        });
      },

      //获取暂停时间信息
      async getReviewTime() {
        const {operationType} = this;

        try {
          let url;
          const param = {};
          if(operationType === 'TASK'){
            param.witnessSubTaskId = this.id
            url = 'getEvaluationTimeAndStopInfo'
          } else if (operationType === 'PROJECT') {
            param.projectId = this.id
            url = 'getProjectEvaluationTimeAndStopInfo'
          }


          const { message, code, data } = await GZAPI_EvaluationTime[url](param);
          if (code === 0) {
            const { evaluationEndTime, evaluationStartTime, stopInfoList } = data;
            this.evaluationEndTime = evaluationEndTime;
            this.evaluationStartTime = evaluationStartTime;
            this.stopInfoList = stopInfoList.map((item) => {
              let duration = "";
              const { witnessStopTime, witnessRecoveryTime } = item;
              const st = witnessStopTime && moment(witnessStopTime).format("x");
              const et = witnessRecoveryTime && moment(witnessRecoveryTime).format("x");
              if (witnessRecoveryTime && witnessStopTime) {
                duration = genTime(st - 0, et - 0);
              }
              return {
                ...item,
                duration: duration
              };
            });
          } else {
            this.$message({
              type: "error",
              message: message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (e) {
          console.error(e);
        }
      },

      // 获取 标包的结束时间
      async getTaskReviewTime(data){
        return GZAPI_EvaluationTime.getEvaluationTimeAndStopInfo(data)
      },

      // 获取 项目的结束时间
      async getProjectReviewTime(data){
        return GZAPI_EvaluationTime.getProjectEvaluationTimeAndStopInfo(data)
      }
    }
  };
</script>

<style scoped lang="scss">
  .add-revive {
    display: inline-block;
    margin-left: 10px;

    .el-alert--warning.is-light {
      border-color: #fff4e6;
      margin-bottom: 20px;
      align-items: flex-start;
    }

    .add-revive-table {
      margin-bottom: 40px;

      .add-revive-table-td {
        display: flex;
        align-items: center;
        height: 35px;
      }
    }

    .add-revive-bottom {
      display: flex;
      align-items: center;

      & > div:first-child {
        margin-right: 10px;
      }
    }
  }

  ::v-deep .el-input__suffix {
    display: none;
  }

  ::v-deep .el-input--suffix .el-input__inner {
    padding-right: 0;
  }

  ::v-deep .el-table__body,
  .el-table__footer,
  .el-table__header {
    table-layout: auto;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 20px;
  }
</style>
